<template>
  <div class="app-container">
    <div style="padding: 20px;">
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            新增/修改
          </strong>
        </el-col>
      </el-row>

      <div style="padding:20px">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="店铺" prop="store">
            <el-select
              v-model="store"
              filterable
              clearable
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in stores"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="用户" prop="user">
            <el-select
              v-model="form.user"
              filterable
              remote
              clearable
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              :disabled="disabled"
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="绑定已有汇付账号">
            <el-switch
              v-model="check"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <div v-if="check == true">
            <el-form-item label="汇付Id">
              <el-input v-model="huifuId" />
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="真实姓名">
              <el-input v-model="form.card_name" />
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="form.cert_no" />
            </el-form-item>
            <el-form-item label="身份证有效开始日期">
              <el-input v-model="form.cert_begin_date" />
              <div style="color:#909399;font-size:16px;">填写格式如:2001.01.01请填写20010101</div>
            </el-form-item>
            <el-form-item label="有效日期类型">
              <el-radio
                v-for="(item,index) in options"
                :key="index"
                v-model="form.cert_validity_type"
                :label="item.value"
                @change="changeDateType()"
              >
                {{ item.label }}
              </el-radio>
            </el-form-item>
            <el-form-item v-if="!certVisabled" label="身份证有效结束日期">
              <el-input v-model="form.cert_end_date" />
              <div style="color:#909399;font-size:16px;">填写格式如:2001.01.01请填写20010101</div>
            </el-form-item>
            <el-form-item label="注册银行卡号">
              <el-input v-model="form.card_no" />
            </el-form-item>
            <el-form-item label="预留手机">
              <el-input v-model="form.mp" />
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: Number(this.$route.params.id),
      store: null,
      form: {
        card_no: '',
        mp: '',
        card_name: '',
        cert_no: '',
        card_type: 1,
        prov_id: '310000',
        area_id: '310100',
        band_code: '01030000',
        cert_type: '00',
        cert_validity_type: '0',
        cert_begin_date: '',
        cert_end_date: '',
        user: null
      },
      loading: false,
      options: [{ value: '0', label: '常规' }, { value: '1', label: '长期有效' }],
      certVisabled: false,
      stores: [],
      users: [],
      check: false,
      huifuId: ''
    }
  },
  created() {
    // 不支持修改
    // if (this.id) {
    //   this.axios.get(`/manage/huifu-accounts/${this.id}`).then((res) => {
    //     this.form.card_no = res.data.card_no
    //     this.form.mp = res.data.mp
    //     this.form.card_name = res.data.card_name
    //     this.form.cert_no = res.data.cert_no
    //     this.form.cert_begin_date = res.data.cert_begin_date
    //     this.form.cert_end_date = res.data.cert_end_date
    //   })
    // }
    this.getStores()
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        this.axios.get(`/manage/users`, { params: {
          '@display': `{
              'id': 'entity.getId()',
              'username': 'entity.getUsername()'
          }`,
          '@filter': `entity.getEnabled() == true && entity.getUsername() matches "${query}"`
        }}).then((res) => {
          this.users = res.data
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.users = []
      }
    },
    getStores() {
      this.axios.get(`/manage/stores`, {
        params: {
          '@filter': `entity.getStatus() == "0"`,
          limit: 10000000
        }
      }).then((res) => {
        this.stores = res.data
      })
    },
    changeDateType() {
      if (this.form.cert_validity_type > 0) {
        this.certVisabled = true
        this.form.cert_end_date = ''
      } else {
        this.certVisabled = false
      }
    },
    onSubmit() {
      if (!this.form.user) {
        this.$message.error('请选择绑定用户！')
        return
      }
      // 绑定已有汇付Id
      if (this.check === true) {
        if (this.huifuId === '') {
          this.$message.error('请填写汇付Id')
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const data = {
          store: this.store,
          user: this.form.user,
          huifuId: this.huifuId
        }
        this.axios.post(`/manage/huifu-accounts/register/individual-user`, data)
          .then((res) => {
            this.$message.success('请求成功！')
            this.$router.go(-1)
          })
          .finally(() => {
            loading.close()
          })
      } else {
        if (!this.form.card_name) {
          this.$message.error('请填写真实姓名！')
          return
        }
        if (!this.form.cert_no) {
          this.$message.error('请填写身份证号！')
          return
        }
        if (!this.form.card_no) {
          this.$message.error('请填写银行卡号！')
          return
        }
        if (!this.form.mp) {
          this.$message.error('请填写预留手机！')
          return
        }
        if (!this.form.cert_begin_date) {
          this.$message.error('请填写有效日期！')
          return
        }
        if (parseInt(this.form.cert_validity_type) === 0 && !this.form.cert_end_date) {
          this.$message.error('请填写有效日期！')
          return
        }
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        const data = {
          store: this.store,
          user: this.form.user,
          mobile_no: this.form.mp,
          card_info: this.form
        }
        this.axios.post(`/manage/huifu-accounts/register/individual-user`, data)
          .then((res) => {
            this.$message.success('请求成功！')
            this.$router.go(-1)
          })
          .finally(() => {
            loading.close()
          })
      }
    }
  }
}
</script>
